<template>
  <div class="add-box">
      <div>
          <el-icon>
              <Tickets />
          </el-icon>数据列表
      </div>
  </div>
  <!-- 表格 -->
  <el-table :data="tableData" style="width: 100%" border>
      <el-table-column prop="id" label="编号" width="100" />
      <el-table-column prop="name" label="秒杀时间段名称" />
      <el-table-column prop="startTime" label="每日开始时间">
          <template #default="scope">
              {{ fomatDate(scope.row.startTime) }}
          </template>
      </el-table-column>
      <el-table-column prop="endTime" label="每日结束时间">
          <template #default="scope">
              {{ fomatDate(scope.row.endTime) }}
          </template>
      </el-table-column>
      <el-table-column prop="productCount" label="商品数量" />
      <el-table-column prop="address" label="操作">
          <template #default="scope">
              <el-button type="primary" link @click="toFlashProductRelation(scope.row.id)">商品列表</el-button>
          </template>
      </el-table-column>
  </el-table>
</template>

<script setup lang="ts">
import { Tickets } from '@element-plus/icons-vue'
import { marketing } from "@/api"
import { useRoute, useRouter } from "vue-router"
import { reactive, toRefs } from 'vue';
import { fomatDate } from "@/utils"

const route = useRoute()
const router = useRouter()

interface IAllSelectList extends IFlashSessionLis {
    productCount: number
}
interface IFlashSessionLis {
    createTime: string
    endTime: string
    id: number
    name: string
    startTime: string
    status: 0 | 1
}

interface IState {
  tableData: IAllSelectList[]
}

const state: IState = reactive({
  tableData: []
})

if (route.query.flashPromotionId) {
  marketing.getAllSelectList(+route.query.flashPromotionId).then(res => {
      if (res.code === 200) {
          // console.log(res);
          state.tableData = res.data
      }
  })
}

const toFlashProductRelation = (id: number) => {
  // console.log(id);
  router.push(`/sms/flashProductRelation?flashPromotionId=${route.query.flashPromotionId}&flashPromotionSessionId=${id}`)
}

const { tableData } = toRefs(state)
</script>

<style scoped lang="less">
.add-box {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  margin: 20px;
  border-radius: 10px;
  box-shadow: 0 0 4px 2px #ccc;
}
</style>